<template>
	<div class="realName-wrap">
		<div class="realTitle">请按照提示操作</div>
		<div>
			<ul class="realName-list">
			<li>
				<label>姓名</label><input type="text" placeholder="请输入姓名" v-model="userName" autofocus>
			</li>
			<li>
				<label>身份证号</label><input type="text" placeholder="请输入身份证号" v-model="IDnumber">
			</li>
			</ul>
			<div class="realSure">
				<input type="button" :disabled='isDisabled' value="确认认证" @click='verified'>
			</div>
		</div>
		<toast v-model="isShow">认证成功</toast>
		<verified-ok v-if="showVerified"></verified-ok>
	</div>
</template>

<script>
import VerifiedOk from './verifiedOk'
import { verified } from '../../../../../config/getData'
import Toast from 'vux/src/components/toast/'

export default {
	data(){
		return {
			userName:'',
			IDnumber:'',
			isShow:false,
			showVerified:false
		}
	},
	computed:{
		isDisabled(){
			//久的身份证是15位
			if(this.userName.length >= 1 && (this.IDnumber.length === 18 || this.IDnumber.length === 15) ) return false
			else return true
		}
	},
	methods:{
		verified(){
			verified(this.userName, this.IDnumber).then( res => {
				this.isShow = true
			})
			// this.showVerified = true;
		}
	},
	components: {
		VerifiedOk,
		Toast
	}
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/css/all";

.realName-wrap {@include screen;background: #f5f5f5;font-size: 14px;}
.realTitle {padding: 20px 0 8px 11px;color: #888;}
.realName-list {background: #ffffff;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;
	li {margin-left: 20px;border-bottom: 1px solid #e5e5ee;line-height: 60px;
		label {color: #030303;display: inline-block;font-size: 16px;width: 90px;}
		input {-webkit-appearance: none;border: none;background: none;font-size: 16px;}
	}
	li:last-child {
		border-bottom: none;
	}
}
.realSure {margin-top: 30px;
	 input[type="button"] {background-color: $red;width: 96%;margin: 0 auto;display: block;color: #fff;border: none;line-height: 48px;font-size: 20px;border-radius: 6px;}
	 input:disabled{background-color: $redQ;}
}
</style>

